<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>01_何为数据代理</title>
  </head>
  <body>
    <!-- 将数据对象中的数据托管给一个中间对象 -->
    <!-- 原理：Object.defineProperty() -->
    <!-- 阅读：https://blog.csdn.net/xiaoxianer321/article/details/112637956 -->
    <!-- 这样我们也就明白了为什么数据变更会自动更新视图 -->
    <script type="text/javascript">
      let proxyObj = {};
      let dataObj = { name: "张三", gender: "男", age: 28 };
      Object.defineProperty(proxyObj, "name", {
        set(newValue) {
          console.log("name 的 setter 被调用了");
          dataObj.name = newValue;
        },
        get() {
          console.log("name 的 getter 被调用了");
          return dataObj.name;
        },
      });
      Object.defineProperty(proxyObj, "gender", {
        set(newValue) {
          console.log("gender 的 setter 被调用了");
          dataObj.gender = newValue;
        },
        get() {
          console.log("gender 的 getter 被调用了");
          return dataObj.gender;
        },
      });
      Object.defineProperty(proxyObj, "age", {
        set(newValue) {
          console.log("age 的 setter 被调用了");
          dataObj.age = newValue;
        },
        get() {
          console.log("age 的 getter 被调用了");
          return dataObj.age;
        },
      });

      console.log("dataObj: ", dataObj);

      // 代理的属性后面变为了 (...) ，当点击的时候（当访问的时候），会触发对应的 getter
      console.log("proxyObj: ", proxyObj);
    </script>
  </body>
</html>
